<template>
  <div class="add">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 步骤条 -->
    <el-steps
    :active="active" finish-status="success" class="steps">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
      <el-step title="步骤 4"></el-step>
      <el-step title="步骤 5"></el-step>
    </el-steps>
    <!-- tab栏 -->
    <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="left">
      <el-tab-pane label="基本信息" name="first">
        <el-form ref="form" :model="addGoodsForm" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="addGoodsForm.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="addGoodsForm.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品重量">
          <el-input v-model="addGoodsForm.goods_weight"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="addGoodsForm.goods_num"></el-input>
        </el-form-item>
        <!-- 级联选择器 -->
        <el-form-item label="商品分类">
          <el-cascader
            :options="options"
            change-on-select
            :props="defaultProps"
            v-model="selectedOptions"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
         <el-form-item label="是否促销">
          <el-radio v-model="radio" label="1">是</el-radio>
          <el-radio v-model="radio" label="2">否</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">确认</el-button>
          <el-button>取消</el-button>
        </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品参数" name="second">商品参数</el-tab-pane>
      <el-tab-pane label="商品属性" name="third">商品属性</el-tab-pane>
      <el-tab-pane label="商品图片" name="fourth">
        <el-upload
          class="upload-demo"
          action="http://localhost:8888/api/private/v1/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :headers="headerObj"
          :before-upload="handleBeforeUpload"
          :on-success="handleSuccess"
          :file-list="fileList2"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-tab-pane>
      <el-tab-pane label="商品内容" name="fifth">
        <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)">
        </quill-editor>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getGoodsCate } from '@/api'
export default {
  data () {
    return {
      radio: '1',
      active: 0,
      activeName: 'first',
      fileList2: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
      // 商品基本信息
      addGoodsForm: {
        goods_name: '',
        goods_price: '',
        goods_weight: '',
        goods_num: ''
      },
      // 级联选择器
      options: [],
      // 级联选择器默认选中的值
      defaultProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      // 保存级联浏览器选中的值
      selectedOptions: [],
      // 请求头对象
      headerObj: {
        Authorization: localStorage.getItem('mytoken')
      },
      content: null, // 富文本编辑器内容
       editorOption: {} // 富文本编辑器配置项
    }
  },
  created () {
    // 级联浏览器发送请求
    getGoodsCate(2)
      .then(res => {
        this.options = res.data
      })
  },
  methods: {
    // tab栏
    handleClick (tab, event) {
      // console.log(tab, event)
      this.active = parseInt(tab.index)
    },
    // 级联选择器
    handleChange (value) {
      console.log(value)
    },
    // 上传图片
    // 删除图片执行的函数
    handleRemove (file, fileList) {
      // console.log(file, fileList)
    },
    // 预览图片
    handlePreview (file) {
      // console.log(file)
    },
    // 上传之前
    handleBeforeUpload (file) {
      if (file.size > 61440) {
        this.$message.error('文件不能大于60kb')
        return false
      }
    },
    // 文件上传成功
    handleSuccess (response, file, fileList) {
      console.log(response)
      if (response.meta.status === 200) {
        this.$message.success(response.meta.msg)
        // console.log(123)
      }
    },
    // 富文本编辑器
    onEditorBlur (quill) {
      // console.log('editor blur!', quill)
    },
    onEditorFocus (quill) {
      // console.log('editor focus!', quill)
    },
    onEditorReady (quill) {
      // console.log('editor ready!', quill)
    }
  }
}
</script>
<style lang="scss" scoped>
.steps{
  margin: 20px 0;
}
.quill-editor {
  height: 400px;
  .ql-container {
    height: 300px;
  }
}
</style>
